<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>城市列表</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <style>
        html,
        body {
            font-size: 14px;
            height: 100%;
            background-color: #f2f2f2;
        }

        header {
            position: fixed;
            top: 0;
            width: 100%;
            height: 75px;
            text-align: left;
            background-color: #fff;
            border-bottom: 1px solid #f2f2f2;
        }

        header .back {
            position: relative;
            margin-top: 38px;
            width: 100%;
            height: 1.5rem;
            text-align: center;
        }

        .back img {
            position: absolute;
            left: 1rem;
            width: 1.5rem;
            height: 1.5rem;
            vertical-align: middle;
        }

        main {
            padding-top: 75px;
        }
    </style>
</head>

<body>
    <header>
        <div class="back">
            <img src="../image/icon/back.png" alt="" onclick="api.closeWin()">
            <span>城市列表</span>
        </div>
    </header>
    <main>

    </main>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
    apiready = function() {
        opencity();
    };

    function opencity() {
        var UICityList = api.require('UICityList');
        UICityList.open({
            rect: {
                x: 0,
                y: 75,
                w: api.frameWidth,
                h: api.frameHeight
            },
            resource: '../wgt/citydata.json',
            styles: {
                searchBar: {
                    bgColor: '#696969',
                    cancelColor: '#E3E3E3'
                },
                location: {
                    color: '#696969',
                    size: 12
                },
                sectionTitle: {
                    bgColor: '#eee',
                    color: '#000',
                    size: 12
                },
                item: {
                    bgColor: '#fff',
                    activeBgColor: '#696969',
                    color: '#000',
                    size: 14,
                    height: 40
                },
                indicator: {
                    bgColor: '#fff',
                    color: '#696969'
                }
            },
            currentCity: '北京',
            locationWay: 'GPS',
            hotTitle: '热门城市',
            fixedOn: api.frameName,
            placeholder: '输入城市名或首字母查询'
        }, function(ret, err) {
            if (ret) {
                if (ret.eventType == "selected") {
                    var city = ret.cityInfo.city;
                    $api.setStorage('city', city);
                    api.closeWin({
                        name: 'city'
                    });
                }
            }
        });
    }
</script>

</html>
